<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>已借图书管理</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="/js/jquery-3.6.4.js"></script>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 20px;
        }
        .container-fluid {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            margin: auto;
            max-width: 1200px;
        }
        h1 {
            text-align: center;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        th {
            background-color: #f2f2f2;
        }
        .table-hover tbody tr:hover {
            background-color: #eaeaea;
        }

        /* 自定义操作列样式 */
        .return-btn {
            text-align: center;
        }
        .return-btn {
            color: #007bff;
            cursor: pointer;
            text-decoration: none;
        }
        .return-btn {
            text-decoration: underline;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <h1>已借图书管理</h1>
    <div class="row">
        <!-- 已借图书列表 -->
        <div class="col-md-6">
            <h2>已借图书</h2>
            <table class="table table-hover" id="borrowedBooksTable">
                <thead>
                <tr>
                    <th>书名</th>
                    <th>作者</th>
                    <th>借出日期</th>
                    <th>归还状态</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <!-- 已借图书列表将通过AJAX动态加载 -->
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
    $(document).ready(function() {
        // 加载已借图书列表
        function loadBorrowedBooks() {
            var urlParams = new URLSearchParams(window.location.search);
            var userId = urlParams.get('id');

            $.ajax({
                url: '/api/v1/borrow-records/' + userId,
                type: 'GET',
                success: function(borrowRecords) {
                    var table = $('#borrowedBooksTable > tbody');
                    table.empty(); // 清空原有数据
                    $.each(borrowRecords, function(index, record) {
                        table.append(
                            '<tr>' +
                            '<td>' + record.bookName + '</td>' +
                            '<td>' + record.author + '</td>' +
                            '<td>' + record.borrowDate + '</td>' +
                            '<td>' + (record.returnDate || '未归还') + '</td>' +
                            '<td><button class="return-btn" data-id="' + record.bookId + '" data-record-id="' + record.id + '">归还</button></td>' +
                            '</tr>'
                        );
                    });
                },
                error: function() {
                    alert('无法加载已借图书列表');
                }
            });
        }

        // 绑定归还按钮事件
        $('#borrowedBooksTable').on('click', '.return-btn', function() {
            var bookId = $(this).data('id'); // 获取书籍ID
            var recordId = $(this).data('record-id'); // 获取借阅记录ID
            var urlParams = new URLSearchParams(window.location.search);
            var userId = urlParams.get('id');

            // 发送AJAX POST请求以归还图书
            $.ajax({
                url: '/api/v1/borrow-records/' + recordId + '/return',
                type: 'POST',
                data: { userId: userId, bookId: bookId }, // 将bookId添加到POST数据中
                success: function(response) {
                    alert('归还成功');
                    // 刷新已借图书列表
                    loadBorrowedBooks();
                },
                error: function(xhr) {
                    alert('归还失败: ' + xhr.responseText);
                }
            });
        });

        loadBorrowedBooks(); // 初始化加载已借图书列表
    });
</script>
</body>
</html>